<%--
  Created by IntelliJ IDEA.
  User: 旭哥
  Date: 2018/10/21
  Time: 15:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <script src="${pageContext.request.contextPath}/js/Vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue-resource.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>

       /* .modal-body{
            width:300px;
            hright:500px;
        }*/
    </style>
</head>
<body>
          <table class="table" style="font-family: 楷体">
              <tr>
                  <td>角色序号</td>
                  <td>角色名称</td>
                  <td>角色描述</td>
                  <td>操作</td>
              </tr>
               <tbody id="trole">
                    <tr v-for="rr in rolelist">
                        <td>{{rr.roleid}}</td>
                        <td>{{rr.rolename}}</td>
                        <td>{{rr.rolewrite}}</td>
                       <%-- <td><button class="btn btn-primary btn-ms" data-toggle="modal" data-target="#myModal" @click="quan()">授权</button></td>--%>
                        <td><button class="btn btn-primary btn-ms" data-toggle="modal" data-target="#myModal" @click="shouQuan()"
                              style="width:75px;height:35px;margin-left:-160px;">查看已授权</button></td>
                    </tr>0
               </tbody>
          </table>
          <!-- 模态框（Modal） -->
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                              &times;
                          </button>
                          <h4 class="modal-title" id="myModalLabel">
                              角色授权
                          </h4>
                      </div>
                      <div class="modal-body" style="width:800px;height:500px;">
                          <div style="width:270px;height:300px;float:right;margin-right:200px;">
                              <table class="table">
                                  <tr v-for="p in per">
                                      <td>{{p.pername}}</td>
                                      <td>{{p.url}}</td>
                                  </tr>
                              </table>
                          </div>
                          <div style="width:300px;height:300px; float:left;">
                              <table class="table">
                                  <tr v-for="shou in shouByQuan">
                                      <td>{{shou.pername}}</td>
                                      <td>{{shou.url}}</td>
                                  </tr>
                              </table>
                          </div>
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                          </button>
                          <button type="button" class="btn btn-primary">
                              提交更改
                          </button>
                      </div>
                  </div><!-- /.modal-content -->
              </div><!-- /.modal -->
          </div>
</body>
</html>
<script type="text/javascript">

     $(function(){
           ro.queryRole();
           //perm.quan();
    })
           var ro=new Vue({
               el:"#trole",
               data:{
                   rolelist:'',
               },
               methods:{
                  queryRole:function(){
                       var url="/role/queryRole";
                       this.$http.post(url).then(function(data){
                           alert(data);
                              this.rolelist=data.body
                       })
                   },
                   shouQuan:function(){
                       var url="/role/queryByQuan";
                       this.$http.post(url).then(function(data){
                             //perm.shouByQuan=data.body;
                           perm.shouByQuan = data.body.querybyQuan;
                           perm.per = data.body.maps;
                       })
                   },

               }
           })

      var perm = new Vue({
          el:"#myModal",
          data:{
              per:"",
              shouByQuan:"",
          }

      })
</script>